<template>
    <div class="category">
        <div class="sidebar">
            <router-link to="/category/101" tag="div">分类一</router-link>
            <router-link to="/category/102" tag="div">分类二</router-link>
            <router-link to="/category/103" tag="div">分类三</router-link>
            <router-link to="/category/104" tag="div">分类四</router-link>
            <router-link to="/category/105" tag="div">分类五</router-link>
            <router-link to="/category/106" tag="div">分类六</router-link>
        </div>
        <div class="category-list">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Category'
}
</script>

<style lang="scss">
    .category{
        display: flex;
        .sidebar{
            width: 120px;
            height: 100vh;
            background-color: darkgray;
            div{
                text-align: center;
                height: 45px;
                line-height: 45px;
                padding:0 10px;
                &.router-link-exact-active.router-link-active{
                color: rgb(52, 201, 221);
                background-color: #fff;
            }
            }
        }
        .category{
            flex: 1;
        }
    }
</style>
